<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-16 11:38:36
 * @LastEditors: william
 * @LastEditTime: 2025-08-28 10:03:55
-->
<template>
  <div
    ref="refChart"
    :class="className"
    :style="{ height: height, width: width, 'min-height': '120px' }"
  />
</template>

<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'nw-chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  autoResize: {
    type: Boolean,
    default: true
  }
})

const refChart = ref(null)
const myChart = ref(null)

watch(
  () => props.chartData,
  () => {
    setOptions()
  },
  { deep: true }
)

onMounted(_ => {
  useChartMixin({
    refChart,
    myChart,
    setOptions
  }).initChart()
})

const setOptions = _ => {
  const option = {
    // title: {
    //   text: '菜品烹饪数量(top10)',
    //   left: 'center',
    //   textStyle: {
    //     color: '#333'
    //   }
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '30px',
      left: '15px',
      right: '30px',
      bottom: '0',
      containLabel: true
    },
    color: g_style.chartColorArr.split(','),
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: value => g_utils.numberConversion(value)
      },
      axisLine: {
        lineStyle: {
          color: '#666666'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#dddddd'
        }
      }
    },
    yAxis: {
      type: 'category',
      boundaryGap: 20,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#666666'
        }
      }
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        label: {
          show: true, // 启用数值显示
          position: 'right', // 数值显示在柱顶（垂直柱状图）
          color: '#333' // 文字颜色
        },
        barCategoryGap: '45%',
        itemStyle: {
          color: '#5B9BD5'
        }
      }
    ]
  }
  myChart.value &&
    myChart.value.setOption &&
    myChart.value.setOption(option, true)
}
</script>
